<template>
<div id="questionnairePage">
    <el-row class = "top_box">
        <el-col :span="2">
        <el-button style="border-radius:20px;margin:5px 0px 0px 30px;box-shadow:0px 0px 20px #9370DB" @click="toIndex()"><i class="el-icon-caret-left" />首页</el-button>
        </el-col>
        <el-col :span="20" style="font-size:28px;letter-spacing:10px;color:#fbf8ff;text-align:center;margin-top:5px">
            {{title}}
        </el-col>
        <el-col :span="2" />
    </el-row>
    <el-row>
        <el-col :span="8"></el-col>
        <el-col :span="8">
            <el-container class="answer_box">
                <div
                v-for="(question, index) in questionList" 
                v-bind:key="index"
                >
                    <!-- 分节符 -->
                    <p v-if="question.qstype=='3'" class="divider_text">
                        {{question.qcontent}}
                    </p>
                    <!-- 单选 -->
                    <div v-if="question.qstype=='0'">
                        <p class="question_content">
                            {{question.no}}.{{question.qcontent}}
                        </p>
                        <el-select
                        style="width:50%;margin-bottom:10px;float:none" 
                        placeholder="请选择" 
                        v-model="question.options[0]"
                        >
                            <div v-for="(option, n) in question.options" v-bind:key="n">
                            <el-option :label= "option" :value= "option"></el-option>
                            </div>
                        </el-select >
                    </div>
                    <!-- 多选 -->
                    <div v-if="question.qstype=='1'">
                        <p class="question_content">
                            {{question.no}}.{{question.qcontent}}
                        </p>
                        <el-checkbox-group
                        style="width:40%;margin-right:30px;margin-bottom:10px;float:none" 
                        v-model="question.options[0]"
                        >
                            <div v-for="(option, m) in question.options" v-bind:key="m" >
                            <el-checkbox 
                            :label= "option"
                            ></el-checkbox>
                            </div>
                        </el-checkbox-group>
                    </div>
                    <!-- 文字 -->
                    <div v-if="question.qstype=='2'">
                        <p class="question_content">
                            {{question.no}}.{{question.qcontent}}
                        </p>
                        <el-input 
                        style="width:95%;margin-bottom:10px;float:none" 
                        type="textarea"
                        >
                        </el-input>
                    </div>
                </div>
            </el-container>
            <el-button type="success" style="margin-bottom:200px;font-size:16px">提交</el-button>
        </el-col>
        <el-col :span="8"></el-col>
    </el-row>

</div>
</template>

<style>
#questionnairePage {
    background: url("../pics/purple5.png");
    background-size: 100% 100%;
    height: 100%;
    background-attachment: fixed;
}
.answer_box {
    width: 100%;
    padding-top: 100px;
    min-height: 800px;
    text-align: left;
    display: table;
}

/* 分节符 */
.divider_text {
    color: #71589D;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
}
/* 题目 */
.question_content{
    color: #71589D;
    font-size: 20px;
}
</style>

<script>
let questionnairId, questionnair, answer
export default {
    name: 'Answer',
    components: {},
    data() {
        return{
            title:'',
            questionnairId,
            questionnair:{},
            questionList:[],
            answer:[]
        }
    },
    methods: {
        //回首页
        toIndex: function () {
            this.$router.push({path: '/admin'})
        },

        getQuestionnair: function(){
            let questionnairId = this.$route.query.questionnaire_id
            this.$http.post('/getQuestionnair', {
                params:{
                    questionnair_id: questionnairId
                }
            }).then(res => {
            console.log(res.data.data)
            if (res.data.message=='success') {  
                this.title = res.data.data.qname
                this.questionList = res.data.data.questions
                let i = 0
                this.questionList.forEach(element => { //设置题号no
                    if(element.qstype!=='3'){
                        i++
                        element.no = i
                    }
                })
            } else {
                return
            }
            })
            // this.allMyCreatedData.forEach(element => {
            //     if(element.id==questionnairId){
            //         this.questionnair = element
            //         this.title = element.qname
            //     }
            // })
            // this.questionList = this.questionnair.questions
            // let i = 0
            // this.questionList.forEach(element => { //设置题号no
            //     if(element.qstype!=='3'){
            //         i++
            //         element.no = i
            //     }
            // })
        }
    },
    mounted: function(){
        
        let _this = this;
        setTimeout(function() {
            _this.getQuestionnair()
        }, 100)
    }
}
</script>